<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-upload
                    class="upload-demo"
                    action="/operation/operationPlatform/bannerController/uploadImg"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="handleBeforeRemove"
                    multiple
                    :limit="3"
                    :on-exceed="handleExceed"
                    :on-success="handleUploadSuccess"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
                </el-upload>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-upload
                    action="/operation/operationPlatform/bannerController/uploadImg"
                    class="avatar-uploader"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img :src="this.imgUrl" v-if="this.imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-upload
                    action="/operation/operationPlatform/bannerController/uploadImg"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handlePictureCardRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img :src="dialogImageUrl" width="100%" alt="">
                </el-dialog>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-upload
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handleLocalPictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span class="el-upload-list__item-delete" v-if="!disabled" @click="handleDownload(file)">
                                <i class="el-icon-download"></i>
                            </span>
                            <span class="el-upload-list__item-delete" v-if="!disabled" @click="handleRemove(file,[])">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="this.dialogImageUrl" alt="">
                </el-dialog>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <el-upload
                    action="/operation/operationPlatform/bannerController/uploadImg"
                    class="upload-demo"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                    <el-button type="primary" size="small">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpeg/png格式的图片</div>
                </el-upload>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="6">
                <el-upload
                    action="/operation/operationPlatform/bannerController/uploadImg"
                    class="upload-demo"
                    :on-change="handleChange"
                    :file-list="fileList">
                    <el-button type="primary" size="small">点击上传</el-button>
                </el-upload>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
let parsePath = require("parse-filepath")
@Component({})
export default class UploadComponent extends Vue {
    name = ''
    fileList:any[] = [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
    }, {
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
    }]

    handleRemove (file: any, fileList: any) {
        console.log(file)
        console.log(fileList);
    }

    handlePreview (file: any) {
        console.log(file)
    }

    handleExceed (files: any, fileList: any) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    }

    handleBeforeRemove (file: any, fileList: any) {
        return this.$confirm(`确定移除 ${file.name}？`)
    }

    handleUploadSuccess(file:any,fileList:any){
        console.log(file);
        let imageUrl:string = file.url;
        let filePath = imageUrl.indexOf("?") > 0 ? imageUrl.split("?")[0] : imageUrl;
        let fileName = parsePath(filePath).basename;
        let listObj = {
            name:fileName,
            url:imageUrl
        };
        this.fileList.push(listObj);
        console.log(listObj);
    }

    imgUrl = "";
    handleAvatarSuccess(res:any,file:any){
        if(res.status == 1){
            this.imgUrl = res.url;
        }
        console.log(file);
    }
    beforeAvatarUpload(file:File){
        const isJPG = file.type === "image/jpeg" && "image/png";
        const isLt2M = (file.size / 1024 / 1024) < 2;
        if (!isJPG) {
            (this as any).$message.error("上传图片只能是JPG,JPEG,PNG格式");
            return false;
        }
        if (!isLt2M) {
            (this as any).$message.error("上传图片大小不能超过2M");
            return false;
        }
        return isJPG && isLt2M;
    }
    dialogImageUrl = "";
    dialogVisible = false;
    handlePictureCardRemove(file:any,fileList:any){
        console.log(file);
    }
    handlePictureCardPreview(file:any){
        console.log(file);
        this.dialogImageUrl = file.response.url;
        this.dialogVisible = true;
    }
    disabled = false;

    handleDownload(file:any){
        console.log(file);
    }
    handleLocalPictureCardPreview(file:any){
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    }

    handleChange(file:any,fileList:any){
        console.log(file);
        console.log(fileList);
        let fileObj = {
            name:file.raw.name,
            url:file.response.url
        };
        this.fileList.push(fileObj);
    }

}
</script>

<style scoped>


.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
